<template>
	<view class="pageBg">
		<!-- 顶部导航栏 -->
		<fr-top-nav :showTitle="false" :showSearch="false" :showBack="false" bgColor="#FFF" />
		<view class="content flex_c_sb_c" :style="{
		height: scrollHeight + 'px',
		width: '750rpx'}">
			<view class="top margin_t80 flex_c_c_c">
				<image class="topImg bg_main margin_b36" :src="img" mode="aspectFit"></image>
				<text class="f_56 fw_600 tc_1">登录后更精彩</text>
			</view>
			<view class="bottom margin_b80 flex_c_c_c">
				<text class="f_28 fw_600 tc_1 margin_b16">申请获取以下权限</text>
				<text class="f_24 fw_500 tc_8 margin_b36">获得你的公开信息(如昵称、头像等)</text>
				<button class="loginBtn f_32 fw_600 tc_1" @click.stop="getUserProfile">授权登录</button>
			</view>
		</view>
		<fr-get-phone v-show="getPhoneVisible" @closePhoneBox="closePhoneBox"></fr-get-phone>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	export default {
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
				scrollHeight: '',
				rooturl: '',
				img: 'https://cdn.pixabay.com/photo/2021/05/14/12/26/man-6253257_960_720.jpg',
				getPhoneVisible: false,
			};
		},
		onLoad() {
			this.setScrollHeight()
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			setScrollHeight() {
				let sys = uni.getSystemInfoSync()
				let wh = sys.windowHeight
				let hei = this.sysInfo.height
				let topHei = Math.floor(this.sysInfo.rpx * hei * 2)
				let scrollHeight = wh - topHei
				this.scrollHeight = scrollHeight
			},
			getUserProfile(e) {
				const _this = this
				uni.canIUse('getUserProfile') && uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取用户相关信息',
					success({ userInfo }) {
						console.log('用户同意了授权')
						console.log('userInfo：', userInfo)
						// 授权成功事件
						_this.$login.auth(userInfo, (res) => {
							console.log(userInfo)
							if(res.userinfo.mobile === '') {
								_this.getPhoneVisible = true
								// uni.redirectTo({
								// 	url: '/pages/login/getPhone'
								// })
							} else {
								_this.$tool.goBack()
							}
						})
					},
					fail() {
						console.log('用户拒绝了授权')
					}
				})
			},
			closePhoneBox() {
				this.getPhoneVisible = false
				this.$tool.goBack()
			},
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	.content {
		.top {
			width: 100%;
			.topImg {
				width: 152rpx;
				height: 152rpx;
				display: block;
				border-radius: 50%;
			}
		}
		.bottom {
			width: 100%;
			.loginBtn {
				width: 400rpx;
				height: 96rpx;
				line-height: 96rpx;
				background: #FAD431;
				border-radius: 8rpx;
			}
		}
	}
}
</style>
